使用gulp配置代理，简单解决前端跨域问题

gulp配置代理，解决跨域问题

简单的解决跨域问题，有实时重新加载功能，适用于偶尔改个文件，或者H5活动页上面有简单的前后端交互

npm init初始化

全局安装gulp npm i gulp -g

本地下载gulp包 npm i gulp --save-dev

下载gulp-webserver包 npm i gulp-webserver --save-dev

新建gulpfile.js文件

var gulp = require('gulp');
var webserver = require('gulp-webserver');

gulp.task('webserver', function () {
  gulp.src('./')
    .pipe(webserver({
      host: 'localhost',
      port: 8888,
      livereload: true, // 实时重新加载
      open: './index.html', // 启动时默认浏览器打开的文件
      directoryListing: {
        enable: true,
        path: './'
      },
      proxies: [{
        source: '/api',
        target: 'http://www.your.com' // 代理的域名
      }]
    }))
});
// gulp4.0
gulp.task('default', gulp.series(['webserver'], function () {
  console.log('gulp webserver start successfully at localhost:8888');
}));
// 因为gulp升级到了4.0，所以使用gulp.series来启动，如果使用的是gulp3.*的话请将上面的代码替换为下面的
// gulp 3.*
gulp.task('default', ['webserver'], function () {
  console.log('gulp webserver start successfully at localhost:8888');
});

在项目根目录打开命令窗口，使用命令gulp启动

使用：
如果接口是https://www.yoururl.com/login/index
则发起请求时使用/api/login/index